<template>
  <div class="settimeout">
    <h1>uesTimeoutFn 示例</h1>
    <button class="btn" :disabled="!isRunning" @click="startTime">启动定时器</button>
    <button :disabled="isRunning" @click="closeTime">停止定时器</button>
    <p>{{ p.content }}</p>
  </div>
</template>

<script setup lang="ts" name="Settimeout">
  import { ref } from "vue";
  let isRunning = ref(true);
  let timer;
  let p = ref({ content: "定时器已经停止" });

  function startTime() {
    if (isRunning.value) {
      isRunning.value = false;
      timer = setTimeout(() => {
        closeTime();
      }, 5000);
    }
    p.value.content = "定时器已经执行，请等待";
  }
  function closeTime() {
    clearTimeout(timer);
    isRunning.value = true;
    p.value.content = "定时器被迫中止";
  }
</script>

<style scoped>
  .settimeout {
    margin: auto;
    width: fit-content;
  }
  h1 {
    font-size: 40px;
  }
  button {
    width: 150px;
    height: 50px;
    font-size: 20px;
    padding: 10px;
  }
  .btn {
    margin-right: 10px;
  }
  p {
    font-size: 20px;
  }
</style>
